<template>
  <div>
      <!-- vue并没有提供v-color这个指令，所以你写了就报错 -->
      <!-- 我能不能填补这个空白，就是让vue能多出这个指令来 -->
      <!-- 可以，那就是自定义指令 -->
      <!-- 
          自定义指令：
            vue没提供的指令，但是我们可以自己创造出来的，这就叫自定义指令
       -->
       <button @click="color = 'yellow'">修改color</button>
      <div v-color="xx">我是盒子</div>

      <my-goods title="猪脚饭" price="15" desc="特产" />
  </div>
</template>

<script>
import MyGoods from './components/MyGoods.vue'
export default {
    components: {
        MyGoods
    },
    data() {
        return {
            xx: 'red'
        }
    },
    // 局部指令，在哪写就只能在哪用
    directives: {
        /*
        // 这样一写就相当于创造了一个自定义的指令
        // 指令名叫color，用的时候要加 v- 
        // 因为我们说过指令都是以v-开头
        color: {
            // 当指令绑定的元素插入到dom时调用
            // 参数1：el， 代表找到指令绑定的对象
            // 参数2：binding，有指令绑定的相关信息
            //      例如有指令名，指令完整写法，以及最重要的有个value属性
            //             value属性就可以获得指令绑定的数据
            //        例如v-color="xx" 此时binding.value相当于就是拿到xx这个变量的值
            inserted (el, binding) {
            //    console.log(binding)
               // 我希望这个div插入到dom时文字要变颜色
               // 那么要找到这个div，怎么找？用el这个参数
               el.style.color = binding.value
            },
            
            // 这个方法会在指令绑定的数据发生变化时调用
            // 参数跟inserted里的一模一样，只不过bingding.value就拿到的是最新改完后的数据
            update (el, binding) {
                el.style.color = binding.value
            }
        }
        */

       // 当inserted里的代码和update里的代码一样时可以简写
       color (el, binding) {
           // inserted和updated都会调用这个函数
           el.style.color = binding.value
       }
    }
}
</script>

<style>

</style>